<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <style>
        /* Markdown样式 */
h1, h2, h3, h4, h5, h6 {
    color: #333;
    margin: 20px 0 10px;
}

h1 {
    font-size: 2.5em;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.75em;
}

/* 段落样式 */
p {
    font-size: 1em;
    margin: 10px 0;
}

/* 引用样式 */
blockquote {
    color: #666;
    font-style: italic;
    border-left: 4px solid #ccc;
    padding-left: 10px;
    margin: 15px 0;
}

/* 列表样式 */
ul, ol {
    margin: 10px 0;
    padding-left: 20px;
}

li {
    margin: 5px 0;
}

/* 链接样式 */
a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 代码块样式 */
pre {
    background: #f4f4f4;
    /* border-radius: 4px; */
    overflow-x: auto;
    padding: 10px;
    font-size: 0.9em;
}

code {
    background: #f4f4f4;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.9em;
}

/* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

table th {
    background-color: #f4f4f4;
}

/* 水平线样式 */
hr {
    border: 0;
    height: 1px;
    background: #ddd;
    margin: 20px 0;
}

.hljs{
  border-radius: 0 !important;
}
    </style>
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/themes/prism.min.css" rel="stylesheet">
  </head>
  <body>
    <div style="width: 960px; margin:0 auto;">
        <h1>欢迎使用 Markdown 编辑器</h1><p>这是一个功能强大的编辑器，支持各种 Markdown 语法。</p><h2>主要特性</h2><ul><li><p><strong>所见即所得</strong> - 实时预览编辑效果</p></li><li><p><strong>代码高亮</strong> - 支持多种编程语言</p></li><li><p><strong>表格支持</strong> - 轻松创建数据表格</p></li><li><p><strong>LaTeX 公式</strong> - 支持数学公式编辑</p></li><li><p><strong>Mermaid 图表</strong> - 创建流程图和序列图</p></li></ul><h2>代码示例</h2><div data-language="javascript" class="toastui-editor-ww-code-block-highlighting"><pre class="language-javascript"><code data-language="javascript" class="language-javascript"><span class="token comment">// JavaScript 示例</span>
            <span class="token keyword">function</span> <span class="token function">greet</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string template-punctuation string">`</span><span class="token template-string string">Hello, </span><span class="token template-string interpolation interpolation-punctuation punctuation">${</span><span class="token template-string interpolation">name</span><span class="token template-string interpolation interpolation-punctuation punctuation">}</span><span class="token template-string string">!</span><span class="token template-string template-punctuation string">`</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            
            <span class="token function">greet</span><span class="token punctuation">(</span><span class="token string">'Markdown 用户'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div data-language="python" class="toastui-editor-ww-code-block-highlighting"><pre class="language-python"><code data-language="python" class="language-python"><span class="token keyword">def</span> <span class="token function">greet</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">:</span>
                <span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string-interpolation string">f"Hello, </span><span class="token string-interpolation interpolation punctuation">{</span><span class="token string-interpolation interpolation">name</span><span class="token string-interpolation interpolation punctuation">}</span><span class="token string-interpolation string">!"</span><span class="token punctuation">)</span>
            greet<span class="token punctuation">(</span><span class="token string">"Markdown 用户"</span><span class="token punctuation">)</span></code></pre></div><div data-language="c" class="toastui-editor-ww-code-block-highlighting"><pre class="language-c"><code data-language="c" class="language-c"><span class="token macro property directive-hash">#</span><span class="token macro property directive keyword">include</span><span class="token macro property"> </span><span class="token macro property string">&lt;stdio.h&gt;</span>
            <span class="token keyword">int</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">printf</span><span class="token punctuation">(</span><span class="token string">"Hello, World!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>  </code></pre></div><div data-language="go" class="toastui-editor-ww-code-block-highlighting"><pre class="language-go"><code data-language="go" class="language-go"><span class="token keyword">package</span> main
            <span class="token keyword">import</span> <span class="token string">"fmt"</span>
            <span class="token keyword">func</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                fmt<span class="token punctuation">.</span><span class="token function">Println</span><span class="token punctuation">(</span><span class="token string">"Hello, World!"</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span></code></pre></div><div data-language="shell" class="toastui-editor-ww-code-block-highlighting"><pre class="language-shell"><code data-language="shell" class="language-shell">echo "Hello, World!"</code></pre></div><div data-language="dart" class="toastui-editor-ww-code-block-highlighting"><pre class="language-dart"><code data-language="dart" class="language-dart"><span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">print</span><span class="token punctuation">(</span><span class="token string-literal string">'Hello, World!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span></code></pre></div><div data-language="nginx" class="toastui-editor-ww-code-block-highlighting"><pre class="language-nginx"><code data-language="nginx" class="language-nginx"><span class="token directive keyword">server</span> <span class="token punctuation">{</span>
                <span class="token directive keyword">listen</span><span class="token directive"> </span><span class="token directive number">80</span><span class="token punctuation">;</span>
                <span class="token directive keyword">server_name</span><span class="token directive"> example.com</span><span class="token punctuation">;</span>    
                <span class="token directive keyword">location</span><span class="token directive"> /</span> <span class="token punctuation">{</span>
                    <span class="token directive keyword">proxy_pass</span><span class="token directive"> URL_ADDRESS        proxy_pass http://backend</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span></code></pre></div><h2>数学公式示例</h2><p>$$</p><p>\int_0^\infty x^2 dx</p><p>$$</p><h2>表格示例</h2><table><thead><tr><th><p>功能</p></th><th><p>是否支持</p></th><th><p>说明</p></th></tr></thead><tbody><tr><td><p>图片上传</p></td><td><p>✓</p></td><td><p>支持拖放上传</p></td></tr><tr><td><p>深色模式</p></td><td><p>✓</p></td><td><p>夜间友好</p></td></tr><tr><td><p>导出 HTML</p></td><td><p>✓</p></td><td><p>完整格式保留</p></td></tr><tr><td><p>版本历史</p></td><td><p>✓</p></td><td><p>自动保存记录</p></td></tr></tbody></table><h2>Mermaid 流程图</h2><div data-language="mermaid" class="toastui-editor-ww-code-block-highlighting"><pre class="language-mermaid"><code data-language="mermaid" class="language-mermaid"><span class="token keyword">graph</span> TD<span class="token punctuation">;</span>
                A<span class="token text string">[开始]</span> <span class="token arrow operator">--&gt;</span> B<span class="token text string">(编辑内容)</span><span class="token punctuation">;</span>
                B <span class="token arrow operator">--&gt;</span> C<span class="token text string">{是否满意?}</span><span class="token punctuation">;</span>
                C <span class="token arrow operator">--&gt;</span><span class="token label property">|是|</span> D<span class="token text string">[保存内容]</span><span class="token punctuation">;</span>
                C <span class="token arrow operator">--&gt;</span><span class="token label property">|否|</span> B<span class="token punctuation">;</span>
                D <span class="token arrow operator">--&gt;</span> E<span class="token text string">[完成]</span><span class="token punctuation">;</span></code></pre></div>
    </div>
  </body>
</html>
